<template>
<div>
  <div class="card-shadow">
    <div class="addr-box flex-box weui-cell weui-cell_access" @tap="goSelect">
      <div class="flex-1">
        <div v-if="addr.custName && addr.address && addr.phone"  class="flex-box align-start">
          <div class="name-box">
            <p class="name ellipsis">{{addr.custName}}</p>
            <p class="flag" v-if="addr.defaultStatus === '0'">默认</p>
          </div>
          <div class="flex-1">
            <p class="tel">{{addr.phone}}</p>
            <p class="addr">{{areaValue + ' ' + addr.address}}</p>
          </div>
        </div>
        <div class="empty flex-box" v-else>
          <div class="icon icon-empty"></div>
          <p>点击添加地址</p>
        </div>
      </div>
      <div v-if="!readonly" class="weui-cell__ft_in-access"></div>
    </div>
  </div>
</div>

</template>

<script>
import getAreaList from '@/interface/address/getAreaList'

export default {
  name: 'AddressCard',
  props: {
    addr: Object,
    readonly: Boolean
  },
  data () {
    return {
      regionRange: [[], [], []],
      areaValue: ''
    }
  },
  computed: {

  },
  methods: {
    goSelect () {
      if (!this.readonly) {
        wx.navigateTo({url: '/pages/address/main?type=select'})
      }
    },
    async getAreaList (column, id) {
      let arr = []
      arr[0] = await getAreaList({id: 0})
      arr[1] = await getAreaList({id: arr[0][0].areaCode})
      arr[2] = await getAreaList({id: arr[1][0].areaCode})
      this.regionRange = arr
      const index = arr[2].findIndex(v => v.areaCode === this.addr.areaCode)
      if (index > -1) {
        this.areaValue = `${this.regionRange[0][0].areaName}/${this.regionRange[1][0].areaName}/${this.regionRange[2][index].areaName}`
      }
    }
  }
}
</script>

<style lang="less">
  .empty{
    line-height: 48px;
    font-size: 14px;
    .icon-empty{
      width: 48px;
      height: 48px;
      margin-right: 10px;
    }
  }
</style>
